import {
  View,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  ScrollView,
  Modal,
} from 'react-native';
import {
  LinearGradient,
  BgImg,
  Avatar,
  ObserverText,
  ObserverView,
  Img,
  IconBox,
  ModalUserInfo,
  ModalService,
} from '../../components';
import {UserInfoProps, useUserInfoStore} from '../../mobx/userInfo';
import headPng from '../../assets/img/common/mine-head.png';
import coinPng from '../../assets/img/common/coin.png';
import vipbgPng from '../../assets/img/common/vip-bg.png';
import {
  dpw10,
  dpw12,
  dpw120,
  dpw14,
  dpw16,
  dpw18,
  dpw20,
  dpw22,
  dpw24,
  dpw264,
  dpw32,
  dpw36,
  dpw4,
  dpw40,
  dpw48,
  dpw56,
  dpw6,
  dpw64,
  dpw8,
  USER_INFO,
} from '../../constants';
import {
  SvgAccount,
  SvgDay,
  SvgMsg,
  SvgPay,
  SvgRecord,
  SvgShopCart,
  SvgTheme1,
  SvgCustom,
  SvgBindPhone,
  SvgSetting,
} from '../../components/svg';
import History from './History';
import {useState} from 'react';
import {useGlobalStore} from '../../mobx';
import {postSignIn} from '../../services';
import {setItem} from '../../utils';

const list = [
  {
    tKey: 'saveAccount',
    icon: <SvgAccount />,
    link: 'account',
  },
  {
    tKey: 'purchaseHistory',
    icon: <SvgShopCart />,
    link: 'pay-history',
  },
  {
    tKey: 'contactService',
    icon: <SvgCustom />,
    link: 'service',
  },
  {
    tKey: 'bindMobile',
    icon: <SvgBindPhone />,
    link: 'bind-mobile',
  },
  {
    tKey: 'set',
    icon: <SvgSetting />,
    link: 'mine-setting',
  },
];

const list1 = [
  {
    tKey: 'message',
    icon: <SvgMsg />,
    link: 'message',
  },
  {
    tKey: 'theme',
    icon: <SvgTheme1 />,
    link: 'theme',
  },
  {
    tKey: 'task',
    icon: <SvgRecord />,
    link: 'task',
  },
  {
    tKey: 'InvitationWithPrize',
    icon: <SvgPay />,
    link: 'to-pay',
  },
];

const Mine = (
  props: UserInfoProps & {navigation: any; onSign: any; coins: number},
) => {
  const {NickName, SignStatus, navigation, onSign, coins} = props;
  const [visible, setVisible] = useState(false);
  const [sv, setSv] = useState(false);
  const {changeToastKey} = useGlobalStore();

  const toPay = () => {
    if (navigation) {
      navigation.navigate('to-pay');
    }
  };

  const toRouter = (link: string) => {
    if (link === 'theme') {
      changeToastKey('construction');
    } else if (link === 'task') {
      changeToastKey('construction');
    } else if (navigation) {
      navigation.navigate(link);
    }
  };

  const goRoute = (link: string) => {
    if (link === 'account') {
      setVisible(true);
    } else if (link === 'service') {
      setSv(true);
    } else {
      navigation.navigate(link);
    }
  };

  return (
    <ObserverView style={styles.box} themeStyle={{backgroundColor: 'color_6'}}>
      <BgImg url={headPng} isJoin={false} resizeMode="contain">
        <LinearGradient themeColors={['color_1', 'color_24']}>
          <View style={styles.head}>
            <View style={styles.userInfo}>
              <Avatar style={styles.avatar} />
              <View style={styles.titlebox}>
                <ObserverText
                  style={styles.title}
                  tKey={NickName || ''}
                  colorType="text-4"
                />
                <View style={styles.amountbox}>
                  <Img style={styles.coin} url={coinPng} isJoin={false} />
                  <ObserverText
                    style={styles.amount}
                    tKey="gold"
                    tOptions={{score: coins || 0}}
                    themeStyle={{color: 'color_2', backgroundColor: 'color_25'}}
                  />
                </View>
              </View>
            </View>
            <TouchableOpacity onPress={onSign}>
              <ObserverView style={styles.qd}>
                <SvgDay colorKey={SignStatus ? 'color_4' : 'color_1'} />
                <ObserverText
                  style={{fontSize: dpw14, lineHeight: dpw22, marginLeft: dpw6}}
                  tKey={SignStatus ? 'hasSigin' : 'hasNoSigin'}
                />
              </ObserverView>
            </TouchableOpacity>
          </View>
          <ObserverView style={styles.kjdh}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                paddingVertical: dpw12,
              }}>
              {list1.map(it => (
                <TouchableOpacity
                  onPress={() => toRouter(it.link)}
                  key={it.tKey}
                  style={{
                    flex: 1,
                    flexDirection: 'column',
                    alignItems: 'center',
                  }}>
                  {it.icon}
                  <ObserverText
                    style={{
                      fontSize: dpw16,
                      lineHeight: dpw20,
                      textAlign: 'center',
                      marginTop: dpw10,
                    }}
                    tKey={it.tKey}
                  />
                </TouchableOpacity>
              ))}
            </View>
            <BgImg
              style={styles.vipbg}
              url={vipbgPng}
              isJoin={false}
              resizeMode="contain">
              <View style={styles.vip}>
                <ObserverText tKey="FreeAccess" colorType="text-2" />
                <ObserverText tKey="allStationWorks" colorType="text-1" />
              </View>
              <TouchableOpacity onPress={toPay}>
                <LinearGradient
                  direction="left-right"
                  style={{
                    paddingHorizontal: dpw8,
                    paddingVertical: 2,
                    borderRadius: dpw20,
                    justifyContent: 'center',
                  }}
                  themeColors={['color_27', 'color_28']}>
                  <ObserverText tKey="quikyPay" colorType="text-btn-1" />
                </LinearGradient>
              </TouchableOpacity>
            </BgImg>
          </ObserverView>
        </LinearGradient>
      </BgImg>
      <History style={{marginTop: dpw16}} navigation={navigation} />
      <ObserverView
        style={styles.kjdh1}
        themeStyle={{backgroundColor: 'color_2', shadowColor: 'color_24'}}>
        {list.map(it => (
          <TouchableOpacity
            key={it.tKey}
            style={styles.nav}
            onPress={() => {
              goRoute(it.link);
            }}>
            {it.icon}
            <ObserverText
              style={styles.itemtext}
              tKey={it.tKey}
              colorType="text-3"
              themeStyle={{borderColor: 'color_9'}}
            />
          </TouchableOpacity>
        ))}
      </ObserverView>
      <Modal visible={visible} animationType="fade" transparent>
        <ModalUserInfo onClose={() => setVisible(false)} />
      </Modal>
      <Modal visible={sv} animationType="slide" transparent>
        <ModalService onClose={() => setSv(false)} />
      </Modal>
    </ObserverView>
  );
};

export default Mine;

const styles = StyleSheet.create({
  box: {
    flex: 1,
  },
  head: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: dpw56,
  },
  userInfo: {
    marginLeft: dpw16,
    flexDirection: 'row',
  },
  titlebox: {
    marginLeft: dpw8,
  },
  title: {
    fontSize: dpw20,
    lineHeight: dpw24,
    fontWeight: 700,
    marginTop: dpw4,
  },
  amountbox: {
    position: 'relative',
    flexDirection: 'row',
  },
  coin: {
    position: 'absolute',
    left: dpw14,
    top: dpw12,
    width: dpw20,
    height: dpw20,
    zIndex: 1,
  },
  amount: {
    paddingRight: dpw12,
    borderRadius: dpw20,
    marginTop: dpw6,
    marginLeft: dpw4,
    alignItems: 'center',
    paddingVertical: dpw4,
    paddingLeft: dpw40,
  },
  avatar: {
    width: dpw64,
    height: dpw64,
  },
  qd: {
    paddingVertical: dpw6,
    paddingHorizontal: dpw14,
    borderTopLeftRadius: dpw120,
    borderBottomLeftRadius: dpw120,
    flexDirection: 'row',
    alignItems: 'center',
  },
  kjdh: {
    borderRadius: dpw8,
    marginHorizontal: dpw16,
    marginTop: dpw32,
  },
  kjdh1: {
    flex: 1,
    paddingHorizontal: dpw24,
    paddingVertical: dpw16,
    borderTopLeftRadius: dpw24,
    borderTopRightRadius: dpw24,
    marginTop: dpw16,
  },
  vipbg: {
    height: dpw48,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: dpw12,
  },
  vip: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: dpw36,
  },
  nav: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: dpw16,
  },
  itemtext: {
    flex: 1,
    marginLeft: dpw12,
    borderBottomWidth: 1,
    paddingTop: dpw6,
    paddingBottom: dpw12,
  },
});
